<template>
<div>
	<!--头部-->
		<div class="de-top">
			<a href="#/MyShangCheng"><img class="de-jian" src="../assets/img/duanhuowang/zuo.png" alt=""/></a>
			<p class="depin">我的神灯值</p>
			<a><img class="de-fan" src="../assets/img/gerenzhongxin/kefu/duo.png" alt=""/></a>
		</div>
		<!--昵称-->
		<div id="mb-top" class="nic">
			<div class="nic-top">
				<span class="nic-tou"></span>
				<p class="nic-ni">昵称</p>
				<p class="nic-zi"><span>100</span><img class="nic-zt" src="../assets/img/gerenzhongxin/kefu/yuanbao.png" alt=""/></p>
				<p class="nic-gui"><img class="nic-gt" src="../assets/img/gerenzhongxin/kefu/why.png" alt=""/><span>神灯规则</span></p>
			</div>
			<!---->
			<div class="nic-bi">
				<div class="bi-left">
					<p>今年购物抵钱已省</p>
					<p class="nic-ll">0￥</p>
				</div>
				<div class="bi-cent"></div>
				<div class="bi-right">
					<p>今年神灯值抵扣订单</p>
					<p class="nic-ll">0笔</p>
				</div>
			</div>
		</div>
		<!--兑换记录-->
		<div class="dui">
			<a href="#/DuiHuanJiLu"><img class="dui-t" src="../assets/img/gerenzhongxin/kefu/biji.png" alt=""/><span>兑换记录</span></a>
			<img class="dui-j" src="../assets/img/fenlei/more.png" alt=""/>
		</div>
		<!---->
		<div class="dui">
			<a href="#/DengMingXi"><img class="dui-h" src="../assets/img/gerenzhongxin/kefu/huif.png" alt=""/><span>神灯值明细</span></a>
			<img class="dui-j" src="../assets/img/fenlei/more.png" alt=""/>
		</div>
		<!--热销标题-->
		<div class="de-biao">
			<span class="de-left"></span> 
			<span class="xih">神灯值猜你喜欢</span>
			<span class="de-right"></span>
		</div>
		<!--商品-->
	<div v-for="ww in 30">
	<div class="my-danqu">
		<div class="my-timg">
		<img class="my-kitty" src="../assets/img/shouye/lunbo/fang4.png" alt=""/>
		</div>
		<div class="my-twen">
		<p class="my-zi">蜗牛饰容BB霜50g</p>
		<p class="my-mongy"><span class="my-qq">500</span><img src="../assets/img/gerenzhongxin/kefu/yuanbao.png" alt=""/></p>
		<p class="my-qiang">￥22.30</p>
		</div>
	</div>
	<!--右边-->
	<div class="my-rdanqu">
		<div class="my-ktimg">
		<img class="my-kitty" src="../assets/img/shouye/lunbo/fang4.png" alt=""/>
		</div>
		<div class="my-twen">
		<p class="my-zi">蜗牛饰容BB霜50g</p>
		<p class="my-mongy"><span class="my-qq">500</span><img src="../assets/img/gerenzhongxin/kefu/yuanbao.png" alt=""/></p>
		<p class="my-qiang">￥22.30</p>
		</div>
	</div>
 </div>
  <!--点击回到顶部-->
		<a href="#mb-top">
			<div class="mb-ding">
			<img src="../assets/img/shouye/pinpai/dingbu.png" alt=""/>
			</div>
		</a>
</div>
</template>

<script>
</script>

<style>
	/*头部*/
	.de-top {
		position: fixed;
		top: 0;
		left: 0;
		background: #e53e42;
		width: 100%;
		height: 9.6rem;
		display: flex;
		justify-content: space-around;
		align-items:center;
		z-index: 100;
	}
	.depin {
		color:rgba(255,255,255,0.9);
		font-size: 3.6rem;
		text-align: center;
		padding: 0 18rem;
		font-weight: 150;
	}
	.de-jian {
		width: 2.3rem;
		height: 3.8rem;
	}
	.de-fan {
		width: 3.4rem;
		height: 0.9rem;
	}
	/*昵称*/
	.nic{
		width: 100%;
		height: 32rem;
		background: #E53E42;
		margin-top: 9.7rem;
		overflow: hidden;
	}
	.nic-top{
		width: 40rem;
		height: 24rem;
		padding-left: 30rem;
		text-align: left;
	}
	.nic-tou{
		display: block;
		width: 10rem;
		height: 10rem;
		background: #FFFFFF;
		border-radius: 50%;
	}
	.nic-ni{
		font-size: 2.4rem;
		color:#FFFFFF;
		padding:1rem 0 0 2.5rem;
	}
	.nic-zi{
		font-size: 4.8rem;
		color:#FFCD2C;
	}
	.nic-zt{
		width: 4rem;
		padding-left:1rem;
	}
	.nic-gui{
		float: right;
		font-size: 2.4rem;
		color:rgba(255,255,255,0.8);
		margin-top:-20rem;
	}
	.nic-gt{
		width: 3rem;
		padding-right: 1rem;
		margin:-0.7rem 0;
	}
	/**/
	.nic-bi{
		width: 100%;
		height: 8rem;
		display: flex;
		justify-content: space-around;
		align-items: center;
		font-size: 2.4rem;
		color:rgba(255,255,255,0.8);
		font-weight: 100;
		text-align: center;
	}
	.bi-cent{
		width: 0.2rem;
		height: 6rem;
		background: rgba(255,255,255,0.2);
	}
	.nic-ll{
		color: #FFFFFF;
	}
	/*兑换记录*/
	.dui{
		width: 100%;
		height: 8rem;
		border-bottom: 0.1rem solid #CCCCCC;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 2.8rem;
		color:#4D4D4D;
		background: #FFFFFF;
	}
	.dui-t{
		width: 3rem;
		margin:-0.5rem 1rem -0.5rem 3rem;
	}
	.dui-j{
		margin-right: 2rem;
	}
	.dui-h{
		width: 4rem;
		margin:-0.5rem 1rem -0.5rem 3rem;
	}
	/**/
	.de-biao {
		font-size: 2.9rem;
		height: 10rem;
		line-height:10rem;
		color:#808080;
		font-weight: 200;
		text-align: center;
	}
	.de-left,.de-right {
		display: inline-block;
		width: 15rem;
		height: 0.2rem;
		background: #CCCCCC;
		margin-bottom: 0.9rem;
	}
	.xih{
		padding:0 2rem;
	}
		/*单个BB霜🍪*/
	.my-danqu{
		width: 32rem;
		height: 44rem;
		background: #FFFFFF;
		margin:0 2.5rem;
		text-align: center;
		float:left;
		border:0.1rem solid #CCCCCC;
	}
	.my-timg,.my-ktimg{
		width: 100%;
		height: 26.3rem;
		border-bottom: 0.1rem solid #CCCCCC;
	}
	.my-kitty{
		width: 6.4rem;
		height: 17.2rem;
		margin:4.6rem 0;
	}
	.my-twen{
		width: 100%;
		height: 17.6rem;
	}
	.my-zi{
		width: 30rem;
		font-size: 2.4rem;
		padding: 1.5rem 0 0.5rem 2rem;
		text-align: center;
		color:#4d4d4d;
	}
	.my-mongy{
		font-size: 2.4rem;
		color:red;
	}
	.my-qiang{
		font-size: 2.2rem;
		color:#808080;
		margin:auto;
		margin-top: 1rem;
		text-decoration:line-through;
		font-weight: 200;
	}
	.my-qq{
		padding-right: 1rem;
	}
	/*右*/
	.my-rdanqu{
		width: 32rem;
		height: 44rem;
		border: 0.1rem solid #CCCCCC;
		background: #FFFFFF;
		text-align: center;
		margin:0 2rem 1rem 0;
		float:left;
	}
		/*返回顶部*/
	.mb-ding{
		position: fixed;
		right:0.4rem;
		bottom: 17.5rem;
	}
	.mb-ding>img{
		width: 4.8rem;
		height: 4.8rem;
		margin-left: 8.2rem;
	}
</style>